<template>
  <div class="rotation">
    <div class="logo"></div>
    <div class="mui-slider">
      <!-- mui-slider-loop 这个类是控制循坏轮播的 -->
      <div class="mui-slider-group mui-slider-loop">
        <!-- 重复最后一张轮播图 -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <img :src="last.cover" />
          <span class="title">
            {{ last.name }}
          </span>
        </div>

        <!-- 全部轮播图 -->
        <div class="mui-slider-item" v-for="item in rotations" :key="item.id">
            <router-link :to="{ name: 'watchMv', params: { id: item.id } }">>
          <img :src="item.cover" />
          <span class="title">
            {{ item.name }}-{{item.artistName}}
          </span>
          </router-link>
        </div>

        <!-- 重复第一张轮播图 -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <img :src="first.cover" />
          <span class="title">
            {{ first.name}} 
          </span>
        </div>
      </div>

      <!-- 轮播图小圆点 -->
      <div class="mui-slider-indicator">
        <div
          class="mui-indicator"
          v-for="item in rotations"
          :key="item.id"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import mui from "../lib/mui/js/mui.js";
export default {
  name: "Rotation",
  data() {
    return {
      rotations: [],
      first: "",
      last: "",
    };
  },
  created() {
    this.getRotation();
    //请求完成后再调用slider方法，由于axios里没有同步，所以使用setTimeout
    setTimeout(function () {
      //获得slider插件对象
      var gallery = mui(".mui-slider");
      gallery.slider({
        interval: 3000, //自动轮播周期，若为0则不自动播放，默认为0；
      });
    }, 300);
  },
  methods: {
    getRotation() {
      var httpUrl = "/top/mv?limit=5";
      this.$http
        .get(httpUrl)
        .then((response) => {
          
          if (response.data.code == 200) {
            this.rotations = response.data.data;
            //第一张
            this.first = this.rotations[0];
            //最后一张
            this.last = this.rotations[this.rotations.length - 1];
            
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
};
</script>

<style lang="scss">
.mui-slider-item{
    img{
        border-radius: 8px;
    }
   .title{
    width: 90%;
    position: absolute;
    z-index: 9999;
    color: white;
    font-size: 8px;
    text-align: left;
    bottom: 20px;
    left: 20px;
    letter-spacing: 2px;
    font-weight: bold;

 }
}

  
</style>